<template>
  <div>
    <!-- 此处用v-if 是为了案例能看到效果 
    因为v-if是重新添加dom元素
    v-show是利用display则没有 -->
    <h1 ref="zz">{{ is }}</h1>
    <button @click="chekout">点击修改文字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is: "我是h1标签",
    };
  },
  methods: {
    chekout() {
      
      this.is = "我是修改后的文字";

      console.log('data 里面的数据',this.is);
      //数据先被修改
      // dom后被更新,因为dom更新是异步的  所以需要需要this.$nexttick(回调函数),在这个方法函数里面书写需要执行的代码.就会等dom更新后再执行
      this.$nextTick(()=>{
        console.log("dom里面的内容 1",this.$refs.zz.innerHTML);
      })
      console.log("dom里面的内容 2",this.$refs.zz.innerHTML);
    },
  },
};
</script>

<style>
</style>